<?php ob_start('ob_gzhandler') ?>
<!DOCTYPE html >
<html>
<head>
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: HTML5 canvas graph library - Microsoft Internet Explorer support</title>
    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="/favicon.png">

    <script src="../libraries/RGraph.common.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/RGraph.modaldialog.js" ></script>
    <!--[if IE]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->

</head>
<body>
    <div id="breadcrumb">
        <a href="../index.html">RGraph: HTML5 canvas graph library</a>
        >
        <a href="index.html">Documentation</a>
        >
        Microsoft Internet Explorer support
    </div>


    <h1>RGraph: HTML5 canvas graph library - Microsoft Internet Explorer (MSIE) support</h1>

    <script>
        if (document.all) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer does not natively support the HTML5 canvas tag yet, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul></div>');
        }
    </script>
    
    <br />

    <canvas id="myLine" width="600" height="250" style="float: right">[No canvas support]</canvas>

    <script>

        window.onload = function ()
        {
            var data1 = [4,3,6,8,4,2,1,4,9,8,7,8];
            var data2 = [1,2,4,2,1,3,5,6,6,5,3,5];
    
            // No "var" as the variable has to be global
            line = new RGraph.Line('myLine', data1, data2);
            line.Set('chart.title', 'Sales for Acme Inc. (context menu)');
            line.Set('chart.title.vpos', 0.5);
            line.Set('chart.colors', ['red', 'black']);
            line.Set('chart.linewidth', 5);

            // Odd, but this seems to fix an odd MSIE bug where the text is truncated
            line.Set('chart.units.post', '%                         .');

            line.Set('chart.yaxispos', 'right');
            line.Set('chart.key', ['2007', '2008']);
            line.Set('chart.key.background', 'rgba(255,255,255,0.5)');
            line.Set('chart.noaxes', true);
            line.Set('chart.gutter', 35);
            line.Set('chart.hmargin', 10);
            line.Set('chart.background.barcolor1', 'white');
            line.Set('chart.background.barcolor2', 'white');
            line.Set('chart.shadow', true);
            line.Set('chart.contextmenu', [['Show dialog', function () {ModalDialog.Show('myDialog', 300);}], ['Cancel', function () {}]]);
            line.Draw();
        }
    </script>
    
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#getting">Getting hold of ExCanvas</a></li>
        <li><a href="#caveats">Caveats</a></li>
        <li><a href="#frame">Google Chrome Frame</a></li>
    </ul>

    <a name="introduction"></a>
    <h4>Introduction</h4>
    
    <p>
        As of December 2009 RGraph now works partially with Internet Explorer without Google Chrome Frame.
        Graphs are rendered as VML. You are still recommended to use
        <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a> to get the best results.
        The interactive features are unlikely to work correctly. RGraph only works with Microsoft
        Internet Explorer 8.
    </p>
    
    <p>
        Thanks go to everyone involved with the <a href="http://code.google.com/p/explorercanvas/" target="_blank" rel="nofollow">ExCanvas project</a> for providing the ExCanvas library.
    </p>
    
    <a name="getting"></a>
    <h4>Getting hold of ExCanvas</h4>
    
    <p>
        Google ExCanvas is distributed with RGraph in the "excanvas" directory. There is a minified gzip compressed version, along
        with the original.
    </p>

    <a name="caveats"></a>
    <h4>Caveats</h4>
    
    <ul>
        <li>
            Some of the interactive features of RGraph are unlikely to work correctly. The context menu and the
            ModalDialog do though.
        </li>
        <li>Shadows are now available, albeit without blurring.</li>
        <li>You must reference the Javascript libraries in the documents &lt;head&gt;.</li>
        <li>You must use the window.onload event to create your graph.</li>
        <li>
            Inside the window.onload function your graph must be created as a <i>local</i> variable (ie you must use the <i>var</i> keyword). Eg:
            <pre class="code">
&lt;script&gt;
    window.onload = function ()
    {
        var myGraph = new RGraph.Bar('myCanvas', [1,9,8,7,3,4,8,4,9,5,7,8]);
        myGraph.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
        myGraph.Draw();
    }
&lt;/script&gt;
</pre>
        </li>
        <li>If your page is large, there may be a slight pause before the window.onload event fires and thus creates the graph.</li>
        <li>Changing the font that text is shown in is not available.</li>
        <li> You MUST use a webserver for the graphs to work.</li>
    </ul>
    
    <a name="frame"></a>
    <h4>Google Chrome Frame</h4>
    
    <p>
        Instead of ExCanvas you can also use Google Chrome Frame. This basically turns Internet Explorer into Google Chrome, and fully
        supports RGraph. Since it involves a plugin installation, this is a better option if you can fully influence the users PC. If you
        can fully influence the users PC however, a better option might be to simply use one of the browsers with native
        support.
    </p>

    <!-- This is the ModdalDialog -->
    <div id="myDialog" style="display: none">
        <div style="text-align: center; font-family: Arial">
            <h4>Please wait...</h4>
            <span style="font-size: 8pt">(Nothing is going to happen, this is simply an example <a href="" onclick="ModalDialog.Close(); return false">Close</a>)</span>
        </div>
    </div>
</body>
</html>